<!--
 * @Author: daidai
 * @Date: 2022-03-01 11:17:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:50:18
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\center-map.vue
-->
<template>
  <div class="centermap">
    <div class="maptitle" style="position: relative;font-family: 'font1';">
      <div style="display: flex; justify-content:center; margin-left:50px; " @click="showModal(1)">
        <div style="position: absolute;top:40px">{{ data.shoururaning }}</div>
        <div style="position: absolute;bottom:10px">{{ data.shoururaningtext }}</div>
        <img src="@/assets/img/切图/收入排名.png" alt="">
      </div>
      <div style="display: flex;justify-content: center" @click="showModal(2)">
        <div style="position: absolute;top:40px">{{ data.channengraning }}</div>
        <div style="position: absolute;bottom:10px">{{ data.channengraningtext }}</div>
        <img src="@/assets/img/切图/产能排名.png" alt="">
      </div>

    </div>
    <div class="mapwrap">
      <div
        style="position: absolute; top: 20%;left: 30%;transform: translateX(-50%);display: flex;justify-content: space-between;width: 400px;font-family: 'font1'; font-size: 38px;">
        <img src="@/assets/img/切图/2l.png" alt="">
        <div style="position: absolute;font-size: 28px;left: 90px;top: -29px ;color: #23f9fc">{{ data.shouruzengshou }}
        </div>
        <div style="position: absolute;font-size: 20px;left: 90px;top: 18px">{{ data.title1 }}</div>
      </div>
      <div
        style="position: absolute; bottom: 40%;left: 30%;transform: translateX(-50%);display: flex;justify-content: space-between;width: 400px;font-family: 'font1'; font-size: 38px;">
        <img src="@/assets/img/切图/3l.png" alt="">
        <div style="position: absolute;font-size: 28px;left: 90px;top: -29px;color: #23f9fc">{{ data.shourukongsun }}
        </div>
        <div style="position: absolute;font-size: 20px;left: 90px;top: 20px">{{ data.title2 }}</div>
      </div>
      <div
        style="position: absolute; top: 20%;right: -250px;transform: translateX(-50%);display: flex;justify-content: space-between;width: 400px;font-family: 'font1'; font-size: 38px;">
        <img src="@/assets/img/切图/2r.png" alt="">
        <div style="position: absolute;font-size: 28px;left: 45px;top: -29px;color: #23f9fc">{{ data.channengzengshou }}
        </div>
        <div style="position: absolute;font-size: 20px;left: 40px;top: 17px">{{ data.title3 }}</div>
      </div>
      <div
        style="position: absolute; bottom: 40%;right:-250px;transform: translateX(-50%);display: flex;justify-content: space-between;width: 400px;font-family: 'font1'; font-size: 38px;">
        <img src="@/assets/img/切图/3r.png" alt="">
        <div style="position: absolute;font-size: 28px;left: 45px;top: -29px;color: #23f9fc">{{ data.channengkongsun }}
        </div>
        <div style="position: absolute;font-size: 20px;left: 40px;top: 19px">{{ data.title4 }}</div>
      </div>
      <img src="@/assets/img/切图/CF.png" style="position: absolute;left: 50%;transform: translateX( -50%);" alt="">
      <div
        style=" font-family: 'font1';  font-size: 30px; position: absolute;bottom: 2px;left: 50%;transform: translateX(-50%);display: flex;width: 380px;display: flex;justify-content: space-between">
        <div style="text-align: center">
          <span style="color: #fbd894">{{ data.zongshuru }}</span>
          <div style=" height: 50px; line-height: 60px;background: -webkit-linear-gradient(white, #c39c5d);
          text-shadow: 2px 2px 2px  rgba(213, 170, 107,0.2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
             -webkit-text-stroke: 1px #a87303;
 "><img src="../../assets/img/切图/总收入.png" alt=""></div>
        </div>
        <div style="text-align: center">
          <span style="color: #fbd894">{{ data.zongchanneng }}</span>
          <div style="  height: 50px;

  "><img src="../../assets/img/切图/总产能.png" alt=""></div>
        </div>
      </div>
    </div>
    <modal :visible="dialogVisible" :maskClosable="true" @close="close">
      <div style=" width: 100%;display: flex;justify-content: center">
        <div
          style="font-size: 25px; border-bottom: 1px solid #ccc;   width: 450px;text-align: center;padding-bottom: 10px">
          {{ currentTitle }}</div>
        <div></div>
      </div>
      <Echart id="rightTop" :options="option" class="right_top_inner" ref="charts" height="450px" width="100%" />
      <!--      <div style="height: 300px;width: 100%;">-->
      <!--        <Chart3D :dataModal="currentData"/>-->
      <!--      </div>-->
    </modal>
  </div>
</template>

<script lang="ts" setup>
import Modal from "@/components/modal/modal.vue";
import { ref } from "vue";

const { data, dataModal } = defineProps(['data', 'dataModal'])
const currentTitle = ref("")
const currentData = ref([])
const dialogVisible = ref(false)
const option = ref({})
function close() {
  currentData.value = {};
  dialogVisible.value = false;
}
function showModal(type) {
  dialogVisible.value = true;
  type == 1 ? currentTitle.value = "收入排名" : currentTitle.value = "产能排名";
  currentData.value = dataModal[`data${type}`];
  option.value = {
    xAxis: {
      type: 'category',
      data: currentData.value.xAix,
      axisLabel: {//坐标轴刻度标签的相关设置。
        interval: 0, //0：表示全部显示，1：表示隔一个显示一个，2：隔两个显示一个，3：三个显示一个，4：四个显示一个，5：五个显示一个，6：六个显示一个，7：七个显示一个，8：八个显示一个，9：九个显示一个，默认是5。
        formatter: function (params) {
          var newParamsName = "";// 最终拼接成的字符串
          var paramsNameNumber = params.length;// 实际标签的个数
          var provideNumber = 4;// 每行能显示的字的个数
          var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
          /**
           * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
           */
          // 条件等同于rowNumber>1
          if (paramsNameNumber > provideNumber) {
            /** 循环每一行,p表示行 */
            for (var p = 0; p < rowNumber; p++) {
              var tempStr = "";// 表示每一次截取的字符串
              var start = p * provideNumber;// 开始截取的位置
              var end = start + provideNumber;// 结束截取的位置
              // 此处特殊处理最后一行的索引值
              if (p == rowNumber - 1) {
                // 最后一次不换行
                tempStr = params.substring(start, paramsNameNumber);
              } else {
                // 每一次拼接字符串并换行
                tempStr = params.substring(start, end) + "\n";
              }
              newParamsName += tempStr;// 最终拼成的字符串
            }

          } else {
            // 将旧标签的值赋给新标签
            newParamsName = params;
          }
          //将最终的字符串返回
          return newParamsName
        }
      }
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        var result = params[0].name + '<br/>'; // 显示类目名称
        params.forEach(function (item) {
          result += '完成值' + ': ' + item.value + '<br/>' + '完成率' + ': ' + currentData.value.xXix[item.dataIndex] + '<br/>'; // 显示系列名称和值
        });
        return result;
      },
    },
    series: [
      {
        color: {
          type: 'linear',
          // x=0,y=1,柱子的颜色在垂直方向渐变
          x: 0,
          y: 1,
          colorStops: [
            // 0%处的颜色
            {
              offset: 0,
              color: '#02325c',
            },
            // 50%处的颜色
            {
              offset: 0.5,
              color: '#0076b2',
            },
            // 100%处的颜色
            {
              offset: 1,
              color: '#04b4e5',
            },
          ],
          global: false, // 缺省为 false
        },
        stack: "a",
        axisLabel: {
          interval: 0  //设置间隔为0
        },
        data: currentData.value.yAix,
        barWidth: '30%',
        itemStyle: {
          borderRadius: [100, 100, 0, 0],
        },
        label: {
          show: true,
          formatter: function (params) {
            console.log(params, "params")
            return currentData.value.xXix[params.dataIndex]
          },
          position: 'top',
          color: '#fff',
        },
        backgroundStyle: {

          borderRadius: 5
        },
        type: 'bar',
        markPoint: {
          symbol: 'rect',
          symbolSize: [0, 0],
          data: currentData.value.yYAix,
          label: {
            show: true,
            position: 'top',
            color: '#ffffff',
            fontSize: 12,
            fontWeight: 'bold',
            offset: [0, 0]
          },
          itemStyle: {
            color: 'transparent'
          }
        }
      },

    ]

  };
}

</script>
<style lang="scss" scoped>
.centermap {
  box-sizing: border-box;
  margin-bottom: 30px;
  background: url("../../assets/img/切图/地球.png") center bottom no-repeat;

  .maptitle {
    height: 108px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    align-items: center;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(92deg,
          #0072ff 0%,
          #00eaff 48.8525390625%,
          #01aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("../../assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("../../assets/img/xieyou.png") no-repeat;
    }
  }

  .mapwrap {
    height: 500px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4);
    }
  }
}

.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1
}

.pop {
  background-color: #fff;

  position: fixed;
  top: 100px;
  left: 300px;
  width: calc(100% - 600px);
  height: calc(100% - 200px);
  z-index: 2
}

.btn {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid blue;
  padding: 4px 12px;
}
</style>
